<template>
  <TurboTablePlus
    ref="tableRef"
    :search-list="searchList"
    :table-header="tableHeader"
    :table-option="tableOption"
    @searchData="searchData"
  >
    <el-button
      type="primary"
      :icon="Plus"
    >新增</el-button>
    <el-button
      type="primary"
      :icon="Plus"
      @click="hiddenName"
    >显示隐藏姓名</el-button>

    <template #expand="{ row, index }">
      <div>
        {{ index }}
        {{ row.address }}
      </div>
    </template>

    <template #addressSlot="{ row, index }">
      <span style="color: red;">
        {{ "第" + index + "行数据：" + row.address }}
      </span>
    </template>

    <template #handleSlot="{ row, index }">
      <TuIconHandle
        :handle-list="handleList"
        :row
        @handleEvent="(handleName: string) => handleEvent(handleName, row, index)"
      />
    </template>
  </TurboTablePlus>
</template>

<script lang='ts' setup>
import { onMounted, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import type { TableInstance } from './package/types/TableType'

const tableRef = ref<TableInstance>();

const tableOption = {
  selection: true,
  expand: true,
  tableAttrs: {
    'preserve-expanded-content': true
  }
}

const querySearch = (queryString: string, cb: any) => {
  const aaa = [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
  cb(aaa)
}

// 搜索配置
const searchList = [
  {
    label: '输入框',
    prop: 'name',
    type: 'Input'
  },
  {
    label: '默认值输入框',
    prop: 'sex',
    type: 'Input',
    defaultValue: '我是默认值',
  },
  {
    label: '下拉框',
    prop: 'sss',
    type: 'Select',
    options: [
      { label: '测试101', value: '101' },
      { label: '测试102', value: '102' }
    ],
    itemAttrs: {
      clearable: true
    },
  },
  {
    label: '时间选择',
    prop: 'time',
    type: 'DatePicker'
  },
  {
    label: '级联选择器',
    prop: 'aaaaa',
    type: 'Cascader',
    options: [
      { label: '测试101', value: '101' },
      { label: '测试102', value: '102' }
    ]
  },
  {
    label: '多选框',
    prop: 'bbb',
    type: 'Checkbox',
    options: [
      { label: '测试101', value: '101' },
      { label: '测试102', value: '102' }
    ]
  },
  {
    label: '自动补全输入框',
    prop: 'ccc',
    type: 'Autocomplete',
    itemAttrs: {
      'fetch-suggestions': querySearch
    }
  },
  {
    label: '数字输入框',
    prop: 'ddd',
    type: 'InputNumber'
  },
  {
    label: '单选框',
    prop: 'eee',
    type: 'Radio',
    options: [
      { label: '测试101', value: '101' },
      { label: '测试102', value: '102' }
    ]
  },
  {
    label: '树形选择框',
    prop: 'fff',
    type: 'TreeSelect',
    options: [
      { label: '测试101', value: '101' },
      { label: '测试102', value: '102' }
    ]
  },
  {
    label: '日期时间选择器',
    prop: 'ggg',
    type: 'DateTimePicker',
    itemAttrs: {
      type: 'datetime'
    }
  },
  {
    label: '日期范围输入框',
    prop: 'leftRange,rightRange',
    type: 'DateRange',
    defaultValue: ["2025-05-20", "2025-05-21"],
    itemAttrs: {
      placeholder: ['start', 'end']
    }
  },
  {
    label: '数字范围输入框',
    prop: 'leftNumberRange,rightNumberRange',
    type: 'NumberRange',
    itemAttrs: {
      placeholder: ['start', 'end']
    }
  }
]

// 表头配置
let tableHeader = [
  {
    prop: 'date',
    label: '时间'
  },
  {
    prop: 'name',
    label: '姓名',
    heidden: false
  },
  {
    prop: 'address',
    label: '地址',
    slotName: "addressSlot"
  },
  {
    label: '测试多级表头',
    prop: 'aaa',
    children: [
      {
        prop: 'name2',
        label: '表头1'
      },
      {
        prop: 'name1',
        label: '表头2'
      },
    ]
  },
  {
    label: '操作',
    column: {
      width: '200',
      align: 'center'
    },
    slotName: "handleSlot"
  }
]

// 操作栏按钮
const handleList = [
  {
    iconUrl: new URL("@/assets/test-icon/icon03.png", import.meta.url).href,
    label: "详情",
    handleName: "view"
  },
  {
    iconUrl: new URL("@/assets/test-icon/icon01.png", import.meta.url).href,
    label: "编辑",
    handleName: "edit"
  },
  {
    iconUrl: new URL("@/assets/test-icon/icon02.png", import.meta.url).href,
    label: "删除",
    handleName: "delete"
  }
]

const handleEvent = (handleName: string, row: any, index: number) => {
  console.log(handleName);
  console.log(row);
  console.log(index);
}

const tableData = [
  {
    id: 101,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    aaa: {
      name1: 'hahaha1',
      name2: "哈哈哈"
    }
  },
  {
    id: 102,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    aaa: {
      name1: 'hahaha1',
      name2: "哈哈哈"
    }
  }
]

let hidden = false
const hiddenName = () => {
  hidden = !hidden
  tableRef.value?.setColumHidden('name', hidden)
}

const searchData = <T>(params: T, isRest: boolean) => {
  console.log(params);
  console.log(isRest);
}

onMounted(() => {
  tableRef.value?.setData(tableData, 100)
})
</script>

<style scoped lang='scss'></style>